<template>
	<div class="homepage" ref="homepage">
		<div class="fullPage" ref="fullPage" :style="{ height: clientHeight + 'px' }">
			<div class="fullPageContainer" ref="fullPageContainer">
				<div class="section" :style="{ height: clientHeight + 'px' }">
					<a-row :gutter="12" v-show="isloading">
						<a-col :span="item.width * 2" v-for="(item, index) in configList" :key="index">
							<component :is="item.i" :cardHeight="cardHeight" :pageScale="pageScale" :type="item.type ? item.type : ''"></component>
						</a-col>
						<!-- <alarmLevel></alarmLevel> -->
					</a-row>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {
	card,
	countCattle,
	alarmDisposal,
	amountlist,
	inspectionChart,
	branceSpace,
	lineChart,
	eliminateCowChart,
	board,
	// point,
	count,
	amountStatistics,
	mapbox,
	inspectionChartSmall,
	alarmLevel
} from './components/index.js';
import throttle from 'lodash/throttle';
import { sysManageapi } from '@/api/index';
// * 默认缩放值
const scale = {
	width: '1',
	height: '1'
};
// * 设计稿尺寸（px）
const baseWidth = 7404 * 0.1;
const baseHeight = 5374 * 0.1;

// * 需保持的比例
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
/* 浏览器比列 */
export default {
	name: 'Home',
	data() {
		return {
			drawTiming: null,
			fullpage: {
				current: 1, // 当前的页面编号
				isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
				deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
			},
			clientHeight: 500,
			pointList: [
				{
					text: '晃州镇',
					bankname: '晃州支行',
					point: {
						top: '20%',
						left: '60%'
					}
				}
			],
			init: false,
			pageScale: 1,
			configList: [],
			isloading: false
		};
	},
	components: {
		card,
		countCattle,
		alarmDisposal,
		amountlist,
		inspectionChart,
		branceSpace,
		lineChart,
		eliminateCowChart,
		board,
		// point,
		count,
		amountStatistics,
		mapbox,
		inspectionChartSmall,
		alarmLevel
	},
	computed: {
		cardHeight() {
			return (this.clientHeight - 36) / 2 + 'px';
		}
	},
	created() {
		window.addEventListener('resize', throttle(this.resize, 200));
		this.pageScale = parseFloat((window.innerWidth / 1920).toFixed(5));
		this.getConfig();
		this.resize();
	},
	mounted() {
		this.getConfig();
	},
	beforeDestroy() {
		window.removeEventListener('resize', throttle(this.resize, 200));
	},
	methods: {
		calcHeight() {
			if (this.$refs['homepage'] && this.$refs['homepage'].clientHeight) {
				let height = this.$refs['homepage'].clientHeight; //获取屏幕的宽度
				this.clientHeight = height;
				let scrollPage = this.$refs['fullPageContainer']; // 获取执行tarnsform的元素
				// scrollPage.style.height = height * 3 + 'px';
				this.$nextTick(() => {
					this.init = true;
				});
			}
		},
		calcRate() {
			const mapbox = this.$refs['mapbox'];
			const map = this.$refs['map'];
			if (!mapbox) return;
			// // 当前宽高比
			const currentRate = parseFloat((mapbox.offsetWidth / mapbox.offsetHeight).toFixed(5));
			if (map) {
				if (currentRate > baseProportion) {
					// 表示更宽
					scale.width = ((mapbox.offsetHeight * baseProportion) / baseWidth).toFixed(5);
					scale.height = (mapbox.offsetHeight / baseHeight).toFixed(5);
					map.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
				} else {
					// 表示更高
					scale.height = (mapbox.offsetWidth / baseProportion / baseHeight).toFixed(5);
					scale.width = (mapbox.offsetWidth / baseWidth).toFixed(5);
					map.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
				}
			}
		},
		resize() {
			this.pageScale = parseFloat((window.innerWidth / 1920).toFixed(5));
			this.$nextTick(() => {
				this.calcHeight();
				this.$nextTick(() => {
					this.calcRate();
				});
			});
		},
		getConfig() {
			this.isloading = false;
			this.$postAction(sysManageapi.setEchartsUrl.getByIdBook+'?type=1').then(res => {
				if (res && res.code == 1) {
					if (res.data) {
						let beforeData = JSON.parse(res.data.config);
						if (beforeData.length < 1) {
							// console.log(layout);
							beforeData = [
								{
									i: 'amountStatistics',
									name: '统计指标',
									checked: false,
									height: 142,
									width: 12,
									perm: 'banking:bought_ledger:findAssessPledgeAmount',
									subperm: 'banking:bought_ledger:findCreditUseAmount'
								},
								{
									i: 'mapbox',
									name: '地图',
									checked: false,
									height: 700,
									width: 12,
									perm: ''
								},
								{
									i: 'inspection-chart',
									name: '巡检任务（总行）',
									checked: false,
									height: 480,
									width: 4,
									type: 'head',
									noFilter: true,
									perm: 'banking:inspection:headStatistics'
								},
								{
									i: 'inspection-chart-small',
									name: '巡检任务（支行）',
									checked: false,
									height: 480,
									width: 4,
									type: 'sub',
									noFilter: false,
									perm: 'banking:inspection:subStatistics'
								},
								{
									i: 'alarm-disposal',
									name: 'AI预警',
									checked: false,
									height: 480,
									width: 4,
									perm: 'supervise:alarm:typeStatistics'
								},
								{
									i: 'count-cattle',
									name: '定时盘点',
									checked: false,
									height: 480,
									width: 4,
									perm: 'supervise:inventory:statistics'
								},

								{
									i: 'eliminate-cow-chart',
									name: '出/入栏统计',
									checked: false,
									height: 480,
									width: 6,
									perm: 'basicinfo:cow:monthCount'
								},
								{
									i: 'brance-space',
									name: '市场空间',
									checked: false,
									height: 480,
									width: 8,
									perm: 'banking:bought_ledger:findMarketSpace'
								},

								{
									i: 'count',
									name: '合作农场/抵押牛数量',
									checked: false,
									height: 480,
									width: 4,
									perm: 'basicinfo:farm:count',
									subperm: 'basicinfo:farm:count'
								},
								{
									i: 'amountlist',
									name: '抵押金额告警',
									checked: false,
									height: 480,
									width: 4,
									perm: 'banking:bought_ledger:findPledgeWarn'
								},
								{
									i: 'board',
									name: '用信金额排行榜单',
									checked: false,
									height: 480,
									width: 8,
									perm: 'banking:bought_ledger:findUseRanking'
								},

								{
									i: 'line-chart',
									name: '新增用信金额',
									checked: false,
									height: 480,
									width: 6,
									perm: 'banking:bought_ledger:findAddUseAmount'
								}
							];
						}
						let afterData = [];
						beforeData.forEach(item => {
							if (item.subperm) {
								if (this.$_has(item.perm) && this.$_has(item.subperm)) {
									afterData.push(item);
								}
							} else {
								if (this.$_has(item.perm)) {
									afterData.push(item);
								}
							}
						});
						this.$nextTick(() => {
							this.configList = afterData;
							console.log(this.configList);
							this.isloading = true;
						});
					} else {
						let beforeData = [
							{
								i: 'amountStatistics',
								name: '统计指标',
								checked: false,
								height: 142,
								width: 12,
								perm: 'banking:bought_ledger:findAssessPledgeAmount',
								subperm: 'banking:bought_ledger:findCreditUseAmount'
							},
							{
								i: 'mapbox',
								name: '地图',
								checked: false,
								height: 700,
								width: 12,
								perm: ''
							},
							{
								i: 'inspection-chart',
								name: '巡检任务（总行）',
								checked: false,
								height: 480,
								width: 4,
								type: 'head',
								noFilter: true,
								perm: 'banking:inspection:headStatistics'
							},
							{
								i: 'inspection-chart-small',
								name: '巡检任务（支行）',
								checked: false,
								height: 480,
								width: 4,
								type: 'sub',
								noFilter: false,
								perm: 'banking:inspection:subStatistics'
							},
							{
								i: 'alarm-disposal',
								name: 'AI预警',
								checked: false,
								height: 480,
								width: 4,
								perm: 'supervise:alarm:typeStatistics'
							},
							{
								i: 'count-cattle',
								name: '定时盘点',
								checked: false,
								height: 480,
								width: 4,
								perm: 'supervise:inventory:statistics'
							},

							{
								i: 'eliminate-cow-chart',
								name: '出/入栏统计',
								checked: false,
								height: 480,
								width: 6,
								perm: 'basicinfo:cow:monthCount'
							},
							{
								i: 'brance-space',
								name: '市场空间',
								checked: false,
								height: 480,
								width: 8,
								perm: 'banking:bought_ledger:findMarketSpace'
							},

							{
								i: 'count',
								name: '合作农场/抵押牛数量',
								checked: false,
								height: 480,
								width: 4,
								perm: 'basicinfo:farm:count',
								subperm: 'basicinfo:farm:count'
							},
							{
								i: 'amountlist',
								name: '抵押金额告警',
								checked: false,
								height: 480,
								width: 4,
								perm: 'banking:bought_ledger:findPledgeWarn'
							},
							{
								i: 'board',
								name: '用信金额排行榜单',
								checked: false,
								height: 480,
								width: 8,
								perm: 'banking:bought_ledger:findUseRanking'
							},

							{
								i: 'line-chart',
								name: '新增用信金额',
								checked: false,
								height: 480,
								width: 6,
								perm: 'banking:bought_ledger:findAddUseAmount'
							}
						];
						let afterData = [];
						beforeData.forEach(item => {
							if (item.subperm) {
								if (this.$_has(item.perm) && this.$_has(item.subperm)) {
									afterData.push(item);
								}
							} else {
								if (this.$_has(item.perm)) {
									afterData.push(item);
								}
							}
						});
						this.$nextTick(() => {
							this.configList = afterData;
							console.log(this.configList);
							this.isloading = true;
						});
						console.log(this.configList);
					}
				}
			});
		}
	}
};
</script>
<style scoped lang="less">
.homepage {
	height: 100%;
	overflow: auto;
	margin: 0 -10px;
}

.fullPage {
	//   overflow: hidden;
	padding: 6px 12px;
}
.fullPageContainer {
	width: 100%;
	height: 1000px;
	transition: all linear 0.5s;
}
.section {
	width: 100%;
	height: 1000px;
	background-position: center center;
	background-repeat: no-repeat;
}
.map {
	width: 740px;
	height: 537px;
	background: url(/home/map.png) no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: left top;
	overflow: hidden;
}
</style>
<style>
.point,
.point::before,
.point::after {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	content: '';
}
.point::before {
	animation: scale 2s infinite;
}
.point::after {
	animation: scale2 2s infinite;
}
@keyframes scale {
	0% {
		transform: scale(1);
		opacity: 0.9;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
@keyframes scale2 {
	0% {
		transform: scale(1);
		opacity: 0.9;
	}
	100% {
		transform: scale(4);
		opacity: 0;
	}
}
.point {
	background: #ffb453;
}
.point::before,
.point::after {
	background: rgba(255, 246, 235, 1);
	z-index: -1;
}
.point2,
.point2::before,
.point2::after {
	background-color: rgba(0, 221, 254, 0.9);
}
.point3,
.point3::before,
.point3::after {
	background-color: rgba(1, 88, 255, 0.9);
}
.point4,
.point4::before,
.point4::after {
	background-color: rgba(135, 229, 8, 0.9);
}
</style>
